<template>
  <div class="device-function h-100P flex-column">
    <table-card
      title="设备属性"
      :table-set="propertyTableSet"
      :page="propertyPage"
      class="card-body"
      @pageChange="changePage($event, '属性')"
    >
      <template slot="actionBar" slot-scope="scope">
        <el-button
          type="text"
          size="small"
          class="update-button"
          @click.stop="updateProperty(scope)"
        >
          编辑
        </el-button>
      </template>
    </table-card>
    <table-card
      title="设备服务"
      :table-set="serviceTableSet"
      :page="servicePage"
      class="card-body"
      @pageChange="changePage($event, '服务')"
    />
    <el-dialog title="编辑" :visible.sync="isUpdateShow" width="574px">
      <el-form ref="FieldForm" :model="fieldForm" label-width="100px">
        <el-form-item label="属性 :">{{ fieldForm.name }}</el-form-item>
        <el-form-item label="标识符 :">{{ fieldForm.property }}</el-form-item>
        <el-form-item label="属性值 :" prop="content">
          <el-input v-model="fieldForm.content" placeholder="请输入属性值" />
        </el-form-item>
        <el-form-item label="属性说明 :">{{ fieldForm.remark }}</el-form-item>
      </el-form>
      <template slot="footer">
        <SubButton title="提交" @subClick="subContent" />
        <CancelButton @cancelClick="cancelContent" />
      </template>
    </el-dialog>
  </div>
</template>

<script>
import TableCard from '@/components/table-card/index'
import { findPropertyList, findServiceList, addOrUpdatePropertyValue } from '../api'
import SubButton from '@/components/sub-button/index.vue'
import CancelButton from '@/components/cancel-button/index.vue'

export default {
  name: 'Function',
  components: {
    TableCard,
    CancelButton,
    SubButton,
  },
  props: {
    /**
     * @type {Object} device 设备详情
     */
    device: {
      type: Object,
      required: true,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      isUpdateShow: false,
      propertyTableSet: {
        columns: [
          { label: '属性名称', prop: 'name' },
          { label: '标识符', prop: 'property' },
          { label: '参数类型', prop: 'typeName' },
          { label: '属性说明', prop: 'remark' },
          { label: '属性值', prop: 'content' },
        ],
        tableData: [],
        actionBar: true,
      },
      propertyPage: {
        total: null,
        pageSize: 3,
        pageNo: 1,
      },
      fieldForm: {},
      serviceTableSet: {
        columns: [
          { label: '服务名称', prop: 'name' },
          { label: '标识符', prop: 'identifier' },
          { label: '服务说明', prop: 'remark' },
        ],
        tableData: [],
        actionBar: false,
      },
      servicePage: {
        total: null,
        pageSize: 3,
        pageNo: 1,
      },
    }
  },
  watch: {
    device: {
      // 等待父页面传递数据,device改变后初始化页面数据
      immediate: true,
      handler() {
        this.initData()
      },
    },
  },
  methods: {
    cancelContent() {
      this.$refs['FieldForm'].resetFields()
      this.getPropertyList()
      this.isUpdateShow = false
    },
    async subContent() {
      const PropertyValue = {
        id: this.fieldForm.contentId,
        content: this.fieldForm.content,
        deviceId: this.device.id,
        proId: this.fieldForm.id,
      }
      console.log(PropertyValue)
      await addOrUpdatePropertyValue(PropertyValue)
      this.isUpdateShow = false
    },
    updateProperty(row) {
      this.fieldForm = row.data
      console.log(row.data)
      this.isUpdateShow = true
    },
    // 切换页面
    async changePage(pageNo, type) {
      if (type === '属性') {
        this.propertyPage.pageNo = pageNo
        await this.getPropertyList()
      } else {
        this.servicePage.pageNo = pageNo
        await this.getServiceList()
      }
    },
    async initData() {
      // 初始化数据
      await this.getPropertyList()
      await this.getServiceList()
    },
    // 获取物模型属性列表
    async getPropertyList() {
      const propertyQuery = Object.assign(this.propertyPage, {
        metadataId: this.device.productVo.metadataId,
        deviceId: this.device.id,
      })
      const { total, records } = await findPropertyList(propertyQuery)
      for (let i = 0; i < records.length; i++) {
        switch (records[i].type) {
          case 'STRING':
            records[i].typeName = '字符串'
            break
          case 'FLOAT':
            records[i].typeName = '浮点数'
            break
          case 'LONG':
            records[i].typeName = '长整数 '
            break
          default:
            break
        }
      }
      this.propertyTableSet.tableData = records
      this.propertyPage.total = total
    },
    // 获取物模型服务列表
    async getServiceList() {
      const serviceQuery = Object.assign(this.servicePage, {
        metadataId: this.device.productVo.metadataId,
      })
      const { total, records } = await findServiceList(serviceQuery)
      this.serviceTableSet.tableData = records
      this.servicePage.total = total
    },
  },
}
</script>

<style lang="scss" scoped>
.update-button {
  font-size: 14px;
  font-weight: 400;
  color: #0084ee;
}

.card-body {
  margin: 20px 8px;
}

::v-deep {
  .el-dialog__footer {
    text-align: center;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    color: #666;
  }

  .el-form-item__label {
    color: #333;
  }
}
</style>
